<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <link type="text/css" rel="stylesheet" href="/css/banner.css" />
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <!-- <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/images/ss.png" />
      </div>
    </div> -->
    <div class="R">
      <a href="map.html"><img src="/images/map.png" /></a>
    </div>
  </div>

  <!-- Swipe 轮播 -->
  <van-swipe v-if="top" class="aui-m-slider" :autoplay="3000" indicator-color="blue">
    <van-swipe-item v-for="(item, key) in top" :key="key">
      <van-image width="100%" :height="260" fit="cover" :src="item.thumbs_text" @click="TopInfo(item.id)" />
    </van-swipe-item>
  </van-swipe>

  <div class="lqgwBox">
    <ul>
      <li><router-link to="/product/index"><img src="/images/quanbu.png" />
          <p>全部商品</p>
        </router-link></li>
      <li><a href="live.html"><img src="/images/zibo.png" />
          <p>商品直播</p>
        </a></li>
      <li><a href="coupon.html"><img src="/images/youhui.png" />
          <p>优惠活动</p>
        </a></li>
      <li><a href="ranking.html"><img src="/images/bandan.png" />
          <p>榜单排行</p>
        </a></li>
    </ul>
  </div>

  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>

  <ul class="proul" v-if="news">
    <li v-for="(item, key) in news" :key="key">
      <div class="con">
        <router-link :to="{ path: '/product/info', query: { pid: item.id } }">
          <van-image width="100%" :height="176" fit="cover" :src="item.thumbs_text" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>

  <div class="h54"></div>

  <tabbar />
</template>

<script setup>
// 引入公共底部文件
import tabbar from '@/components/common/tabbar.vue'
import { onBeforeMount, ref } from 'vue';

// eslint-disable-next-line no-undef
const { proxy } = getCurrentInstance()

// 创建数据
let top = ref([])
let news = ref([])

// 生命周期
onBeforeMount(() => {
  ProductData()
})

// 查询数据
const ProductData = async () => {
  var result = await proxy.$POST({ url: '/index/index' })

  if (result.code == 0) {
    proxy.$fail(result.msg)
    return false
  }

  top.value = result.data.top
  news.value = result.data.news
}

// 轮播图跳转
const TopInfo = async (pid) => {
  proxy.$router.push({ path: '/product/info', query: { pid } })
}
</script>